<template>
  <div class="loading mask">

    <div class="main">
      <img src="../../assets/imgs/loading.gif" class="img" />
      <p v-if="text">{{ text }}</p>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'loading',
    props: {
      text: {
        type: String,
        default: ''
      },
      from: {
        type: String,
        default: ''
      },
    },
    created() {
      if(this.from) {
        setTimeout( () => {
          this.$router.push(this.from)
        },3000)
      }
    },
    data () {
      return {
      }
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    .main {
      background: #FFFFFF;
      box-shadow: 0 4px 12px 0 rgba(74,74,74,0.17);
      border-radius: 8px;
      font-size: 30px;
      color: #777777;
      text-align: center;
      padding:30px 60px;
      width:auto;
      .img {
        display: block;
        width:52px;
        height:52px;
        margin:0 auto 20px auto;
      }
    }
  }
</style>
